<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-marker
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="qwebchannel.js"></script>
        <script type="text/javascript" src="reconnecting-websocket.min.js"></script>
        <script type="text/javascript">
            var catecharts;
            window.onload = function()
            {
                console.log("window.onload");
                var socket = new ReconnectingWebSocket("ws://127.0.0.1:14618");
                
                socket.onopen = function()
                {
                    var messageJson = JSON.stringify({"type": "heartBeat", "message": "charts heartBeat"});
                    socket.send(messageJson);
                    new QWebChannel(socket, function(channel) {
                        // 这里写信号与槽绑定
                        catecharts = channel.objects.catecharts
                        catecharts.updateForm.connect(function(form) {
                            updateForm(form);
                        });

                        catecharts.addData.connect(function(){
                            addData();
                        });

                        catecharts.subtractData.connect(function(){
                            subtractData();
                        });

                        catecharts.clearData.connect(function(){
                            clearData();
                        });

                        catecharts.updateStyle.connect(function(style){
                            updateStyle(style);
                        });
                    });
                }

                socket.onerror = function(evt)
                {
                    let received_msg = evt.data;
                    console.log("on error: " + received_msg);
                }

                socket.onmessage = function(evt)
                {
                    let received_msg = evt.data;
                    console.log("Message is received: " + received_msg);
                }

                socket.onclose = function(evt)
                {
                    console.log("Connection is closed: " + evt.code + " - " + evt.reason);   
                }

                /*setInterval(function heartBeat()
                {
                    if(socket.readyState === 3)
                    {
                        socket = new WebSocket("ws://127.0.0.1:14618");
                    }
                }, 100);*/
            }



            

        </script>

    </head>

    <body style="height: 100%; margin: 0; overflow: hidden" >
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="echarts/echarts.min.js"></script>
        <script type="text/javascript" src="style/dark.js"></script>
        <script type="text/javascript" src="style/macarons.js"></script>
 
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">

        console.log("init charts")

        //echarts.registerTheme('customed', config);

            //echarts.registerTheme('customed', themeJSON)
            var dom = null;
            var myChart = null;
            //initEchart();

            var app = {};

            var option;



            option = {
                grid: {
                    top: 50,
                    left: 50,
                    right: 50,
                    bottom: 50,
                },
                tooltip: {
                    trigger: 'axis'
                },
                /*toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },*/
                dataZoom: [
                    /*{   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 0,      // 左边在 10% 的位置。
                        end: 100,      // 右边在 60% 的位置。
                        show: false,
                    },
                    {   // 这个dataZoom组件，默认控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 0,      // 左边在 10% 的位置。
                        end: 100,      // 右边在 60% 的位置。
                    },*/
                    {
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                    {
                        show: false,
                        type: 'slider',
                        filterMode: 'none',
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                    /*{
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        yAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                    {
                        show: false,
                        type: 'slider',
                        filterMode: 'none',
                        yAxisIndex: [0],
                        start: 0,
                        end: 100
                    },*/
                ],

                xAxis: {
                    type: 'category',
                    //boundaryGap: false,
                    show: true,
                    data: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} °C'
                    },
                    min: -20,
                    max: 20
                },
                series: [
                    {
                        name: 'TestData',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0, 2, 3 ,4],
                        markPoint: {
                            /*data: [
                                {
                                    //name: '周最低', 
                                    value: -2, 
                                    xAxis: 1, 
                                    yAxis: -2,
                                    itemStyle: {
                                        color: "#00dd7d"
                                    }
                                },
                                {
                                    //name: '周最高', 
                                    value: 5, 
                                    xAxis: 3, 
                                    yAxis: 5,
                                    itemStyle: {
                                        color: "#feae4b"
                                    }
                                },
                            ],*/
         
                        },
                        markLine: {
                            data: [
                             
                                /*{ name: '低限',
                                  yAxis: -5000,
                                  itemStyle: {
                                    color: "#00dd7d"
                                  }
                                },
                                { name: '高限',
                                  yAxis: 5000,
                                  itemStyle: {
                                        color: "#feae4b"
                                    }
                                },*/
                                /*{type: 'average', name: '平均值'},
                                [ {
                                    symbol: 'circle',

                                    type: 'max',
                                    name: '最高点'
                                }, {
                                    symbol: 'arrow',
                                    x: '90%',
                                    yAxis: 'max',
                                    label: {
                                        //position: 'start',
                                        formatter: '最大值'
                                    }
                                }],
                                [{
                                    symbol: 'circle',
                                    type: 'min',
                                    name: '最低点' 
                                }, {
                                    symbol: 'arrow',
                                    x: '90%',
                                    yAxis: 'min',
                                    label: {
                                        //position: 'start',
                                        formatter: '最小值'
                                    }
                                }]*/
                            ]
                        }
                    }
                ]
            };


            function updateForm(form)
            {
                option.series[0].type = form;
                //var dom = document.getElementById("container");
                //var myChart = echarts.init(dom, 'macarons');
                myChart.setOption(option);
            }

            function addData()
            {
                option.xAxis.data.push(option.xAxis.data.length+1);
                option.series[0].data.push(Math.ceil(Math.random()*100));
                option.yAxis.max = Math.max.apply(null, option.series[0].data) + 10;
                option.yAxis.min = Math.min.apply(null, option.series[0].data) - 10;
                updateOption();
            }

            function subtractData()
            {
                if(option.xAxis.data.length !== 0)
                {
                    option.xAxis.data.pop();
                    option.series[0].data.pop();
                    option.yAxis.max = Math.max.apply(null, option.series[0].data) + 10;
                    option.yAxis.min = Math.min.apply(null, option.series[0].data) - 10;
                    updateOption();
                }
            }

            function clearData()
            {
                option.xAxis.data.length = 0;
                option.series[0].data.length = 0;
                updateOption();
            }

            function updateOption()
            {
                myChart.setOption(option);
            } 

            function updateStyle(style)
            {
                if(style === "Black")
                {
                    if(myChart !== null)
                    {
                        myChart.dispose();
                    }
                    dom = document.getElementById("container");
                    myChart = echarts.init(dom, 'dark');
                } else if(style === "White") {
                    if(myChart !== null)
                    {
                        myChart.dispose();
                    }
                    dom = document.getElementById("container");
                    myChart = echarts.init(dom, 'macarons');
                }


                myChart.on('dataZoom', function (params) {
                    console.log(params);
                    option.dataZoom[0].start = params.batch[0].start 
                    option.dataZoom[0].end = params.batch[0].end
                    option.dataZoom[1].start = params.batch[0].start 
                    option.dataZoom[1].end = params.batch[0].end
                    });
                if (option && typeof option === 'object') {
                    
                    myChart.setOption(option);
                    window.onresize=function(){
                    myChart.resize();
                    }
                }

                updateOption();


            }
 

        //var myChart = echarts.init(dom);




        </script>
    </body>
</html>